<template>
  <div
    :style="
      'width:' +
      screenWidth +
      'px;height:' +
      screenHeight +
      'px; overflow: auto;'
    "
  >
    <Header :Current="-1" @CurrentSelection="CurrentSelection"></Header>
    <div class="box">
      <div
        class="ad"
        :style="{
          backgroundImage: 'url(' + require('@/assets/images/lanse.png') + ')',
        }"
      >
        <div class="ad_content">
          <div class="ad_title">海优招聘</div>
          <div class="ad_details">2025 年海外优青招聘汇总(全国高校)</div>
        </div>
      </div>
      <div class="box_content">
        <div class="border_left_box">
          <div :key="index" v-for="(item, index) in Menulist">
            <h3
              class="left_title_List"
              :class="{ left_title_List_color: index == faIndex }"
            >
              <Icon
                v-if="index == faIndex"
                size="22"
                color="#fff"
                style="margin: 0 5px 0 10px"
                type="ios-list-box-outline"
              />
              <Icon
                v-else
                size="22"
                color="#000"
                style="margin: 0 5px 0 10px"
                type="ios-list-box-outline"
              />
              {{ item.title }}
            </h3>
            <!-- :class="{ MenulistItem2: currentChildID == Yitem.id }" -->
            <div
              @click="changeMenu(index, keyindex, item, Yitem)"
              class="MenulistItem"
              :class="{ MenulistItem_color: keyindex == ChIndex }"
              v-for="(Yitem, keyindex) in item.children"
              :ref="`key${keyindex}`"
              :key="keyindex + 'key'"
            >
              {{ Yitem.title }}
            </div>
          </div>
        </div>
        <div class="border_right_box">
          <div class="border_right_title">
            <div class="border_right_title_icon"></div>
            <div v-if="Menulist.length > 0">
              {{ Menulist[faIndex].title }}——{{
                Menulist[faIndex].children[ChIndex].title
              }}
            </div>
          </div>
          <div class="content_box">
            <ul class="ul_style">
              <li
                @click="goPage(item)"
                class="li_style"
                v-for="(item, index) in tableList"
                :key="index"
              >
                {{ item.title }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import axios from "axios";
import Header from "@/componets/Header.vue";
import Footer from "@/componets/Footer.vue";
export default {
  name: "tabsTablelist",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      screenWidth: 0,
      screenHeight: 0,
      tableList: [],
      faIndex: 0,
      ChIndex: 0,
      Menulist: [
        {
          name: "海优招聘",
          childs: [
            {
              name: "招聘链接",
            },
          ],
        },
        {
          name: "申请准备",
          childs: [
            {
              name: "申请政策咨询",
            },
            {
              name: "依托单位选择",
            },
            {
              name: "论文要求",
            },
            {
              name: "其他",
            },
          ],
        },
        {
          name: "撰写申请书",
          childs: [
            {
              name: "申请书撰写",
            },
            {
              name: "经验分享",
            },
            {
              name: "模版下载",
            },
          ],
        },
        {
          name: "会评答辩",
          childs: [
            {
              name: "PPT制作要求",
            },
            {
              name: "PPT模版",
            },
            {
              name: "录音、录视频",
            },
          ],
        },
        {
          name: "入职",
          childs: [
            {
              name: "入职前注意事项",
            },
            {
              name: "考核晋升要求",
            },
            {
              name: "常见的项目申请规划",
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.updateScreenSize();
    window.addEventListener("resize", this.updateScreenSize);
    this.getList();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.updateScreenSize);
  },
  created() {},
  activated() {},
  methods: {
    CurrentSelection(index, value) {
      this.CurrentNum = index;
      if (value == undefined) {
        value = index;
      }
      switch (value) {
        case 0:
          this.$router.push({
            name: "home",
          });
          break;
        case 1:
          this.$router.push({
            name: "OverseasOutstandingYouth",
          });
          break;
        case 2:
          this.$router.push({
            name: "TalentProject",
          });
          break;
        case 3:
          this.$router.push({
            name: "NationalNatural",
          });
          break;
        case 4:
          this.$router.push({
            name: "ScientificResearchDrawings",
          });
          break;
        case 5:
          this.$router.push({
            name: "ppt",
          });
          break;
        case 6:
          this.$router.push({
            name: "ResearchInformation",
          });
          break;
        case 8:
          this.$router.push({
            name: "searchInput",
          });
          break;
        case 20:
          this.$router.push({
            name: "ThesisGuidance",
          });
          break;
        default:
          break;
      }
    },
    updateScreenSize() {
      this.screenWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
    },
    changeMenu(faIndex, ChIndex, faritem, item) {
      console.log("faIndex", faIndex);
      console.log("ChIndex", ChIndex);
      console.log("faritem", faritem);
      console.log("item", item);
      this.faIndex = faIndex;
      this.ChIndex = ChIndex;
      let data = {
        articleType: faritem.value,
        typeo: item.value,
        pageNum: 1,
        pageSize: 10,
      };
      axios.post(`/textcontent/search`, data).then((res) => {
        console.log("获取", res);
        let { code, message, result } = res;
        if (code == "ok") {
          this.tableList = result.data;
        } else {
        }
      });
    },
    goPage(item) {
      window.open(
        "https://www.diantangkeji.com/#/detailspage?id=" + item.id,
        "_blank"
      );
    },
    getList() {
      let _this = this;
      axios
        .post(`/type/typeTree`)
        .then((res) => {
          console.log("列表内容", res);
          console.log("_this.ArryName", _this.ArryName);
          if (res.code == "ok") {
            let data = res.result.find((item) => {
              return item.title == "海外优青";
            });
            console.log("data", data);
            this.Menulist = [data];
            if (this.$route.params.index) {
              this.$nextTick(() => {
                this.$refs[`key${this.$route.params.index}`][0].click();
              });
            } else {
              this.$nextTick(() => {
                this.$refs[`key0`][0].click();
              });
            }
          }
          this.$Message.success("操作成功");
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>
.box {
  box-sizing: border-box;
  margin: 0 auto;
  width: 1920px;
  /* height: 1388px; */
  background-size: cover; /* 让背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中显示 */
}
.ad {
  width: 1920px;
  height: 430px;
  margin: 0 auto;
  box-sizing: border-box;
  border: 1px solid #eff2f5;
}
.ad_content {
  margin: 127px 0 0 309px;
}
.ad_title {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 44px;
  color: #ffffff;
  line-height: 65px;
}
.ad_details {
  margin-top: 14px;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 400;
  font-size: 24px;
  color: #ffffff;
}
.box_content {
  box-sizing: border-box;
  padding: 80px 309px;
  width: 1920px;
  height: 1659px;
  background-color: #fff;
  display: flex;
}
.border_left_box {
  box-shadow: 0px -4px 17px 6px #f0f6ff;
  width: 300px;
  height: 1287px;
  background: #ffffff;
}
.left_title_List {
  font-weight: 500;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-size: 22px;
  color: #000;
  width: 298px;
  height: 66px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.left_title_List_color {
  background-color: #0365fe;
  color: #ffffff;
}
.MenulistItem {
  cursor: pointer;
  padding-left: 70px;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-size: 22px;
  color: #2d2d2d;
  width: 298px;
  height: 66px;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.MenulistItem_color {
  background-color: #e1edff;
}
.border_right_box {
  flex: 1;
  box-sizing: border-box;
  padding-left: 31px;
}
.border_right_title {
  width: 100%;
  height: 52px;
  border-bottom: 1px solid #dcdcdc;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: bold;
  font-size: 26px;
  color: #0365fe;
  display: flex;
  align-items: center;
}
.border_right_title_icon {
  width: 3px;
  height: 28px;
  background-color: #0365fe;
  margin-right: 18px;
}
.content_box {
  box-sizing: border-box;
  padding: 1.5vw;
}
.ul_style {
  list-style-type: disc;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 26px;
  color: #000000;
}
.li_style {
  cursor: pointer;
  /* border: 1px solid red; */
  line-height: 60px;
  height: 60px;
}
.li_style:hover {
  cursor: pointer;
  color: #1970fe;
}
.li_style:active {
  cursor: pointer;
  color: #0013ba;
}
</style>
